<script setup>
import MyPagination from "@/components/MyPagination/MyPagination.vue";
import VideoWsPlayer from "@/components/VideoWsPlayer/VideoWsPlayer.vue";
import Videos from "@/components/VideoPlayer/index.vue";
import { computed, ref, onMounted } from "vue";
import { useParamsStore } from "@/stores/params.js";
import bus from "@/utils/bus.js";

const pageNo = ref(1);
const getVideoFromTree = (children, callback) => {
  if (Array.isArray(children) && children.length > 0) {
    children.forEach((item) => {
      if (item.type + "" === "3") {
        callback(item);
      }
      if (item.children) {
        getVideoFromTree(item.children, callback);
      }
    });
  }
};
const getItemFromTree = (list = [], calback) => {
  list.forEach((ele) => {
    calback(ele);
    const hasChild = ele?.children?.length > 0;
    if (hasChild) {
      getItemFromTree(ele.children, calback);
    }
  });
};
const paramsStore = useParamsStore();
const videoList = computed(() => {
  let res = [];
  getItemFromTree(paramsStore.treeData, (item) => {
    if (item.type + "" === "3") {
      res.push(item);
    }
  });
  return res;
});

const total = computed(() => videoList.value.length);

const curPageVideo = computed(() => {
  let list = [];
  list = videoList.value.filter((_v, i) => {
    return i + 1 > (pageNo.value - 1) * 4 && i < pageNo.value * 4;
  });
  return list;
});
const previewVideo = (item) => {
  bus.emit("previewVideo", item);
};
const ClickCamera = (e) => {
  const item = videoList.value.find((ele) => e.indexOf(ele.label) !== -1);
  previewVideo(item);
};
onMounted(() => {
  bus.on("ClickCamera", ClickCamera);
});
</script>

<template>
  <div class="jk-right">
    <div class="video-box" :key="pageNo">
      <div
        class="video"
        v-for="(item, index) of curPageVideo"
        :key="item.id"
        @click="previewVideo(item)"
      >
        <VideoWsPlayer :url="'/video/A01.mp4'" />
      </div>
    </div>
    <div class="fy">
      <MyPagination v-model="pageNo" :total="total" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.jk-right {
  width: 80%;
  margin-left: 20%;
  height: 93%;
  background-image: url(/imgs/25.png);
  background-size: 100% 100%;
  padding: 30px;
  box-sizing: border-box;
  pointer-events: all;
  margin-right: 30px;
  display: flex;
  flex-direction: column;

  .video-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    .video {
      width: calc(50% - 15px);
      cursor: pointer;
    }
  }

  .fy {
    width: 100%;
  }
}
</style>
